import { observer } from 'mobx-react';
import { useEffect } from 'react';
import StatisticStore from '../../../stores/StatisticStore';
import NoData from '../NoData';
import './Statistic.scss';


export const Recommend = observer(() => {
    useEffect(() => {
    }, []);
    return (
        <div className="recommendWrapper">
            {StatisticStore.recommendations.length === 0 ?
                <NoData />
                : <div> <div className="title">
                    <div className="analyst">
                        机构&分析师
                    </div>
                    <div className="rate">评分</div>
                    <div className="price">目标价格</div>
                    <div className="date">日期</div>
                </div>
                    <div className="content">
                        {StatisticStore.recommendations?.map((item, i) => {
                            if (!item.rating || !item.target_price) {
                                return <div key={i}></div>
                            }
                            return <div className="item" key={i}>
                                <div className="icon">{item.analyst[0]}</div>
                                <div className="analyst">
                                    <p > {item.analyst}</p>
                                    <p className="company"> {item.firm_name}</p>

                                </div>
                                <div className="rate">
                                    {item.rating}
                                </div>
                                <div className="price">
                                    {item.target_price}
                                </div>
                                <div className="date">
                                    {item.date.replace(/-/g, '/').slice(2)}
                                </div>
                            </div>
                        })}
                    </div>
                </div>}
        </div>
    );
});
